<template>
  <div class="container">
    <el-card style="margin: 10px 10px 0 10px">
      <el-form>
        <el-row type="flex" justify="space-between" align="middle">
          <el-form-item label-width="85px" label="关键字" size="small">
            <el-input
              v-model.trim="page.keyword"
              placeholder="根据编号搜索"
              style="width: 330px"
            />
          </el-form-item>
          <el-form-item>
            <el-col type="flex" justify="end">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button
                size="small"
                type="primary"
              >搜索</el-button>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>

      <el-row>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          :closable="false"
          show-icon
        />
      </el-row>
      <el-row style="margin-top: 15px">
        <el-table
          v-loading="loading"
          element-loading-text="给我一点时间"
          highlight-current-row
          :data="list"
          :header-cell-style="{ background: '#fafafa', color: '#6060266' }"
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="编号"
            align="center"
            width="180"
          />
          <el-table-column
            prop="questionType"
            label="题型"
            align="center"
            width="180"
          />
          <el-table-column
            prop="questionIDs"
            label="题目编号"
            align="center"
            width="210"
          >
            <template>
              <div>
                <a
                  href="#"
                  style="color:#00b5ff"
                >
                  e35757923940137471813
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="录入时间"
            align="center"
            width="200"
          />
          <el-table-column
            prop="totalSeconds"
            label="答题时间(s)"
            align="center"
          />
          <el-table-column prop="accuracyRate" label="正确率(%)" align="center" />
          <el-table-column prop="userName" label="录入人" align="center" />
          <el-table-column label="操作" align="center">
            <template>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                circle
                class="is-plain"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页 -->
      <!-- /分页 -->
    </el-card>
    <!-- 题目编号弹层 -->
    <question-ids ref="Dialog" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import QuestionIds from '../components/quesetion-ids.vue'
export default {
  components: {
    QuestionIds
  },
  data() {
    return {
      showDialog: false, // 题目编号弹层
      loading: false,
      page: {
        page: 1, // 当前页码
        pagesize: 20,
        keyword: ''
        // total: 0 // 总数
      },
      list: [
        {
          id: 1,
          questionType: '单选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '600',
          accuracyRate: '88',
          userName: '刘贵英'
        },
        {
          id: 2,
          questionType: '简答',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-11 17:44:00',
          totalSeconds: '521',
          accuracyRate: '66',
          userName: '刘胡兰'
        },
        {
          id: 3,
          questionType: '简答',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-21 15:52:00',
          totalSeconds: '400',
          accuracyRate: '55',
          userName: '老刘'
        },
        {
          id: 4,
          questionType: '多选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '600',
          accuracyRate: '77',
          userName: '刘富贵'
        },
        {
          id: 5,
          questionType: '单选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '555',
          accuracyRate: '36',
          userName: '刘若英'
        },
        {
          id: 6,
          questionType: '单选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '600',
          accuracyRate: '88',
          userName: '刘贵英'
        },
        {
          id: 7,
          questionType: '简答',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-11 17:44:00',
          totalSeconds: '521',
          accuracyRate: '66',
          userName: '刘胡兰'
        },
        {
          id: 8,
          questionType: '简答',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-21 15:52:00',
          totalSeconds: '400',
          accuracyRate: '55',
          userName: '老刘'
        },
        {
          id: 9,
          questionType: '多选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '600',
          accuracyRate: '77',
          userName: '刘富贵'
        },
        {
          id: 10,
          questionType: '单选',
          questionIDs: 'e35757923940137471813',
          addTime: '2022-11-22 15:39:00',
          totalSeconds: '555',
          accuracyRate: '36',
          userName: '刘若英'
        }
      ], // 表单数据
      alertText: '' // aleart 提示信息
    }
  },
  methods: {
    // 清除
    resetForm() {
      this.page.keyword = ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
